<template>
  <div>
    <div class="demo-input-suffix">
      学科名称：：
      <el-input v-model="name"></el-input>
      <el-button type="success" @click="handleQuery">查询</el-button>
      <el-button type="primary" @click="queryRequest">刷新</el-button>
    </div>
    <div>
      <el-table stripe :data="tableData" border>
        <el-table-column prop="subject.id" label="ID" fixed/>
        <el-table-column prop="subject.name" label="学科名称"/>
        <el-table-column prop="user.userName" label="教师用户名"/>
        <el-table-column label="操作" fixed="right" min-width="150">
          <template slot-scope="scope">
            <el-button type="primary" plain @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            <el-button type="danger" plain @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>

export default {
  name: "SubjectPage",
  data() {
    return {
      name: '',
      tableData: [],
    }
  },
  mounted() {
    this.queryRequest();
  },
  methods: {
    queryRequest() {
      const url = '/subjects';
      this.axios.get(url).then(resp => {
        this.tableData = resp.data;
      })
    },
    handleQuery() {
      const url = '/subjects/criteria';
      const params = {
        name: this.name,
      }
      this.axios.get(url, {params}).then(resp => {
        this.tableData = resp.data;
      })
    },
    handleEdit(index, {subject}) {
      this.$router.push({
        name: 'SubjectEdit', params: {
          subjectId: subject.id,
          subjectName: subject.name,
          userId: subject.tuserId,
        }
      });
    },
    handleDelete(index, row) {
      this.$confirm('确定删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 点击确认
        const url = `/subjects/${row.subject.id}`;
        this.axios.delete(url).then(resp => {
          if (resp.code === 200) {
            this.$message({
              type: "success",
              message: '删除成功',
              center: true,
            });
          }
        })
        this.queryRequest();
      }).catch(() => {
        // 点击取消
      });
    }
  },
}
</script>

<style scoped>
.el-input {
  width: 200px;
  margin-right: 10px;
}

.el-table {
  margin: 10px 0;
}
</style>